{{extend "simple_layout.html"}}
{{block content_main}}
<style type="text/css">
<!--
table.plan-table {border:0;}
table.plan-table th {border-bottom:1px solid #D9E7FF;border-top:1px solid #D9E7FF;margin-top:15px;padding: 2px 8px;}
table.plan-table tr {height: 30px;}
table.plan-table td {padding: 2px 8px;}
table.plan-table tr:hover{background-color: #f0f0f0;}

-->
</style>

<div class="category" style="padding:20px;">
<!-- <div style="width:100%" class="message-conainter"></div> -->
<table id="table_category" class="plan-table" width="100%">
    <thead>
        <tr>
            <th align="left">功能点分类名称</th>
            <th align="left">操作</th>
        </tr>
    </thead>
    <tbody>
        {{for row in categories:}}
            <tr>
                <td><div id="{{=row.id}}" class="category_name">{{=row.name}}</div></td>
                <td><a href="/systems/{{=system_id}}/functions/category_del/{{=row.id}}" class="delete">删除</a> | 
                <a href="#" class="edit">编辑</a>
                </td>
            </tr>
        {{pass}}
    </tbody>
</table>
<br/>
<form id="add_category" method="POST" action="/systems/{{=system_id}}/functions/category_add">
<label for="new_category">输入分类名称:</label><input type="text" id="new_category" name="name"></input>
<input type="submit" value="保存"></input>
</form>
</div>
<script type="text/javascript">
    var add_line = function(data){
        var target = $('#table_category');
        var t = template('<tr><td><div id="${id}" class="category_name">${name}</div></td><td><a href="/systems/${system}/functions/category_del/${id}" class="delete">删除</a> | <a href="#" class="edit">编辑</a></td></tr>', data);
        $(target).find('tbody').append(t);
        $('.category_name', t).eip('/systems/{{=system_id}}/functions/category_edit',
        {
            savebutton_text:'保存',
            cancelbutton_text:'取消',
            saving_text:'保存中...'
        });
    }
    var line_delete = function(e){
        var el = $(this);
        e.preventDefault();
        $.ajax({
            url:el.attr('href'),
            type: 'POST',
            success: function(r){
                if (r.success){
                    el.parents('tr').remove();
                }else{
                    show_simple_message('处理出错');
                }
            }
        });
    }
    
    $(function(){
        //设置poshytip关闭图片
        $.fn.poshytip.defaults.closeImage = '{{=url_for_static("jqutils/cross_grey_small.png")}}';
        
        //生成ajaxForm的处理函数 create_result_process defined in jqutils.js
        var result_process = create_result_process('#add_category', 
            {success:add_line});
        
        //设置ajaxForm的参数
        var options = { 
            success: result_process,  // post-submit callback 
            resetForm: true,        // reset the form after successful submit 
            dataType: 'json'
        }; 
        // bind form using 'ajaxForm' 
        $('#add_category').ajaxForm(options); 
        
        //在发出ajax请求时清除存在的消息信息
        $(document).ajaxStart(function(){
            show_simple_message('');
        });
        
        //设置关闭facebox时，清除消息，同时清除所有的tips
        $(document).bind('afterClose.facebox', function(){
            show_simple_message('');
            $('#add_category input').poshytip('destroy');
        });
        
        //绑定删除分类事件
        $('#table_category').delegate('a.delete', 'click', line_delete);
        
        //绑定编辑分类事件
        $('#table_category').delegate('a.edit', 'click', function(e){
            e.preventDefault();
            $($(this).parents('tr')[0]).find('div.category_name').trigger('click');
        });
        //处理分类名称修改的处理，使用eip控件
        $('.category_name').eip('/systems/{{=system_id}}/functions/category_edit',
        {
            savebutton_text:'保存',
            cancelbutton_text:'取消',
            saving_text:'保存中...'
        });
    });
    
</script>
{{end}}
